<template>
  <div class="demo">
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>nunber的值为：{{ number }}</h2>
    <button @click="add">点我number值加1</button>
    <button @click="sendStudentName">点我把学生姓名给App</button>
    <button @click="unbind">解绑自定义事件jian</button>
    <button @click="death">点我销毁Student实例对象</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "jian",
      sex: "女",
      number: 0,
    };
  },
  methods: {
    add() {
      console.log("add被调用了");

      this.number++;
    },
    sendStudentName() {
      // $emit触发Student组件上的jian事件
      this.$emit("jian", this.name, 666, 888, 999);
      this.$emit("m1");
    },
    unbind() {
      // this.$off("jian");  //解绑自定义事件jian
      // 解绑多个事件
      // this.$off(["jian", "m1"]);
      // 解绑全部事件
      this.$off();
    },
    death() {
      this.$destroy(); //销毁Student实例对象，及实例对象上的自定义事件
    },
  },
};
</script>


<style scoped>
/* scoped作用域,让样式只在这个vue中工作 */
.demo {
  background-color: orange;
  padding: 5px;
  margin-top: 5px;
}
</style>>

